<script setup>
import { useRouter } from "vue-router";
import { onMounted, ref, reactive, computed } from "vue";
import { Form, Field, CellGroup, Button, Loading } from "vant";
import Huakuai from "@/components/HuaKuai2.vue";
import img0 from "@/assets/54.jpg";
const router = useRouter();
const slideblock = ref(null);
const huaKuaidata = reactive({
  msg: "",
  text: "向右滑动验证",
  imgs: [img0],
  accuracy: 5, // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
  isShowSlide: true,
});

const showFacePage = ref(false); //滑块与人脸验证切换
const faceFormData = reactive({
  token: "",
  nonce: "", //ticket1--NONCE
  sign: "", //ticket2--SIGN
  polocySign: "",
  h5faceId: "",
  account: "1111", //用户账号
  apiKey: "121221", //用户key
  userId: "",
  orderNo: "", //订单号，字母/数字组成的字符串，本次人脸验证合作伙伴上送的订单号，唯一标识
  idNo: "",
  name: "",
  nonce1: "",
  loadingVisible: true, //获取配置loading
  nonceRes: "",
  applyType: "",

  policySign: "", //上送身份信息需要的签名
});

//滑块回调start---------->
const onSuccess = (times) => {
  console.log("验证通过");
  showFacePage.value = true;
  huaKuaidata.msg = `login success, 耗时${(times / 1000).toFixed(1)}s`;
  setTimeout(() => {
    getInfo();
  }, 2000);
};
const onFail = () => {
  console.log("验证不通过");
  huaKuaidata.msg = "";
};
const onRefresh = () => {
  console.log("点击了刷新小图标");
  huaKuaidata.msg = "";
};
const onFulfilled = () => {
  console.log("刷新成功啦！");
};
const onAgain = () => {
  console.log("检测到非人为操作的哦！");
  huaKuaidata.msg = "try again";
  // 刷新
  handleClick();
};
const handleClick = () => {
  slideblock.value.reset();
  console.log(slideblock);
  huaKuaidata.msg = "";
};
//滑块回调end---------->

// 调取人脸h5start----->

// 获取token
const getInfo = () => {
  let param = {
    account: faceFormData.account,
    apiKey: faceFormData.apiKey,
  };
  // 用param掉借口获取token
  gettickets();
};

// 拿token获取NONCE ticket和SIGN ticket
const gettickets = () => {
  let params = {
    account: faceFormData.account,
    userId: faceFormData.userId,
    accessToken: faceFormData.token,
    type: "NONCE" || "SIGN",
  };
  getPolicy();
};

//获取签名--获取policySign与nonceRes
const getPolicy = () => {
  let params = {
    account: faceFormData.account,
    userId: faceFormData.userId,
    accessToken: faceFormData.token,
    idNo: faceFormData.idNo,
    name: faceFormData.name,
    ticket: faceFormData.sign,
    orderNo: faceFormData.orderNo,
  };

  uploadInfo();
};

//上传身份信息--获取h5faceId
const uploadInfo = () => {
  let params = {
    account: faceFormData.account,
    userId: faceFormData.userId,
    accessToken: faceFormData.token,
    idNo: faceFormData.idNo,
    name: faceFormData.name,
    ticket: faceFormData.sign,
    orderNo: faceFormData.orderNo,

    sign: faceFormData.polocySign, //签名上方得到的签名
    sourcePhotoStr: "", //对比原照片
    sourcePhoteType: "2", //对比原照片类型 1-水纹，2高清
  };
  getLogin();
};

//调用h5页面
const getLogin = () => {
  let href = window.location.hash.split("?")[0];
  let params = {
    account: faceFormData.account,
    userId: faceFormData.userId,
    accessToken: faceFormData.token,

    h5faceId: faceFormData.h5faceId,
    nonce: faceFormData.nonce1,
    ticket: faceFormData.nonce,
    orderNo: faceFormData.orderNo,
    url: `${href}#/结果页?nonce=${faceFormData.nonceRes}&ticket=${faceFormData.sign}&account=${faceFormData.account}&accessToken=${faceFormData.accessToken}&applyType=${faceFormData.applyType}`,
    resultType: "1",
    from: "browser",
  };
  let data = "接口返回";
  console.log(data);
  window.location.href = "/face-result";
};
//人脸结果start----->
</script>

<template>
  <div class="face">
    <Huakuai
      v-if="!showFacePage"
      class="huakuai"
      ref="slideblock"
      @success="onSuccess"
      @again="onAgain"
      @fulfilled="onFulfilled"
      @fail="onFail"
      @refresh="onRefresh"
      :slider-text="huaKuaidata.text"
      :imgs="huaKuaidata.imgs"
      :accuracy="huaKuaidata.accuracy"
    >
    </Huakuai>
    <div v-else class="loading-box">
      <van-loading type="spinner" color="#1989fa" />
      <div>正在调取人脸识别页面，请稍后...</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.face {
  .huakuai {
    margin: auto;
    margin-top: 40px;
  }
  .loading-box {
    margin: auto;
    margin-top: 40px;
    text-align: center;
    .van-loading {
      margin-bottom: 30px;
    }
  }
}
</style>
